<!--
    @Title: Amap
    @Author  dudalei
    @Package
    @Date  2025/5/9 23:54
    @description:
-->
<script setup lang="ts">
import { inject, onMounted, useTemplateRef } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { AmapAndThreeInjectKey } from '@/components/AmapThree/index.ts'

const props = withDefaults(
  defineProps<{
    center?: number[]
    zoom?: number
    pitch?: number
    mapStyle?: string
  }>(),
  {
    center: [0, 0],
    zoom: 14,
    pitch: 50,
    mapStyle: 'normal',
  },
)
const mapStore = inject(AmapAndThreeInjectKey)
const mapContainer = useTemplateRef('mapContainer')

async function init() {
  await AMapLoader.load({
    key: '0c7222955570f1b434c4adfcc1e955e8', //可自行修改成自己得高德API key
    version: '2.0',
  })
    .then((_AMap) => {
      if (!mapStore) {
        return
      }
      mapStore.aMap = _AMap
      const map = new _AMap.Map(mapContainer.value!, {
        center: props.center,
        zooms: [1, 20],
        viewMode: '3D',
        zoom: props.zoom,
        pitch: props.pitch,
        mapStyle: 'amap://styles/' + props.mapStyle,
      })

      mapStore.map = map as Record<string, never>
      map.on('click', (e) => {
        const text = `您在 [ ${e.lnglat.getLng()},${e.lnglat.getLat()} ] 的位置单击了地图！`
        console.log(text)
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
onMounted(init)
</script>

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>
